<template>
	<div class="page_root" id="root_demo">
		<!-- 外套 -->
		<div class="warp">
			<!-- 容器 -->
			<div class="container">
				<!-- 行 -->
				<div class="row">
					<!-- 列 -->
					<div class="col-12" id="swiper">
						<!-- 轮播图组件 -->
						<swiper_img :list="list_slide"></swiper_img>
					</div>
				</div>
			</div>
		</div>

		<!-- 外套 -->
		<div class="warp">
			<!-- 容器 -->
			<div class="container">
				<!-- 行 -->
				<div class="row">
					<!-- 列 -->
					<div class="col-12">
						<!-- 商品推荐列表组件 -->
						<list_goods v-if="$check_action('/goods/list', 'get')" :list="list_goods"></list_goods>
					</div>
				</div>
			</div>
		</div>

		<!-- 外套 -->
		<div class="warp">
			<!-- 容器 -->
			<div class="container">
				<!-- 行 -->
				<div class="row">
					<!-- 列 -->
					<div class="col-12">
						<!-- 标题栏组件 -->
						<bar_title class="mt" url="/article/list" title="文章推荐"></bar_title>
						<!-- 文章推荐列表组件 -->
						<list_article :list="list_article"></list_article>
					</div>
				</div>
			</div>
		</div>

		<!-- 外套 -->
		<div class="warp">
			<!-- 容器 -->
			<div class="container">
				<!-- 行 -->
				<div class="row">
					<!-- 列 -->
					<div class="col-12">
						<!-- 标题栏组件 -->
						<bar_title class="mt" url="/forum/list" title="论坛推荐"></bar_title>
						<!-- 文章推荐列表组件 -->
						<list_forum :list="list_forum"></list_forum>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mixin from "../mixins/page.js";
	import bar_title from "../components/diy/bar_title.vue";
	import list_goods from "../components/diy/list_goods.vue";
	import list_forum from "../components/diy/list_forum.vue";
	import list_article from "../components/diy/list_article.vue";
	import swiper_img from "../components/diy/swiper_img.vue";
	export default {
		mixins: [mixin],
		components: {
			bar_title,
			list_goods,
			list_article,
			swiper_img,
			list_forum
		},
		data() {
			return {
				list_ad: [],
				str: "<div>测试一下</div>",
				list_goods: [],
				list_slide: [],
				list_article: [],
				list_menu: [],
				list_link: [],
				list_notice: [],
				list_forum: []
			};
		},
		methods: {
			// 获取轮播图
			get_slides() {
				this.$get("~/api/slides/get_list?", {}, (json) => {
					if (json.result) {
						this.list_slide = json.result.list;
					}
				});
			},
			// 获取导航栏
			get_menu() {
				this.$get("~/api/nav/get_list?", {
					page: 1,
					size: 1
				}, (json) => {
					if (json.result) {
						this.list_menu = json.result.list;
					}
				});
			},
			// 获取文章
			get_article() {
				this.$get("~/api/article/get_list?", {
					page: 1,
					size: 5
				}, (json) => {
					if (json.result) {
						var list_article = json.result.list;
						this.list_article = list_article;
					}
				});
			},
			// 获取广告
			get_ad() {
				this.$get("~/api/ad/get_list?", {
					page: 1,
					size: 5
				}, (json) => {
					if (json.result) {
						var list_ad = json.result.list;
						this.list_ad = list_ad;
					}
				});
			},
			// 获取商品
			get_goods() {
				this.$get("~/api/goods/get_list?", {
					page: 1,
					size: 5
				}, (json) => {
					if (json.result) {
						var list_goods = json.result.list;
						this.list_goods = list_goods;
					}
				});
			},
			// 获取链接列表
			get_link() {
				this.$get("~/api/link/get_list?", {
					page: 1,
					size: 3
				}, (json) => {
					if (json.result) {
						var list_link = json.result.list;
						this.list_link = list_link;
					}
				});
			},
			// 获取公告列表
			get_notice() {
				this.$get("~/api/notice/get_list?", {
					page: 1,
					size: 3
				}, (json) => {
					if (json.result) {
						var list_notice = json.result.list;
						this.list_notice = list_notice;
					}
				});
			},
		},
		mounted() {
			this.get_menu();
			this.get_slides();
			this.get_article();
			this.get_goods();
			this.get_link();
			this.get_notice();
			this.get_ad();
		},
	};
</script>
